<template>
  <div>
    <p>{{state.a}}</p>
    <p>{{state.gf.b}}</p>
    <p>{{state.gf.f.c}}</p>
    <p>{{state.gf.f.s.d}}</p>
    <button @click="myFn">按钮</button>
  </div>
</template>

<script>
/**
 * 1.递归监听
 * 默认情况下，无论是通过ref还是通过reactive都是递归监听
 *
 * 2.递归监听存在的问题
 * 如果数据量比较大，非常消耗性能
 *
 * 3.非递归监听
 * shallowRef / shallowReactive
 *
 * 4.如何触发非递归监听属性更新界面？
 * 如果是shallowRef类型数据，可以通过triggerRef来触发
 *
 * 5.应用场景
 * 一般情况下我们使用ref 和 reactive即可
 * 只有在需要监听的数据量较大的时候，我们才使用shallowRef / shallowReactive
 */
// 递归监听
// import { ref } from "vue";
// import { reactive } from "vue";
// 非递归监听
import { shallowReactive } from "vue";
import { shallowRef, triggerRef } from "vue";
// ref -> reactive即可
// ref(10) -> reactive({value:10})
// shallowRef -> shallowReactive
// shallowRef(10) -> shallowReactive({value:10})
// 所以如果是通过shallowRef 创建的数据，它监听的是.value的变化
// 因为底层本质上value才是第一层
export default {
  name: "App",
  setup() {
    // let state = reactive({
    //   a: "a",
    //   gf: {
    //     b: "b",
    //     f: {
    //       c: "c",
    //       s: {
    //         d: "d"
    //       }
    //     }
    //   }
    // });
    let state = shallowRef({
      a: "a",
      gf: {
        b: "b",
        f: {
          c: "c",
          s: {
            d: "d"
          }
        }
      }
    });
    function myFn() {
      // state.a = 1;
      // state.gf.b = 2;
      // state.gf.f.c = 3;
      // state.gf.f.s.d = 4;
      // console.log(state);
      // console.log(state.gf);
      // console.log(state.gf.f);
      // console.log(state.gf.f.s);

      state.value.gf.f.s.d = 4;
      triggerRef(state);
      // 注意点：vue3 只提供了triggerRef方法，没有提供triggerReactive方法
      // 所以如果是reactive类型的数据，那么是无法主动触发界面更新的

      // 注意点： 如果是通过shallowRef创建数据
      // 那么vue监听的是.value 的变化，并不是第一层的变化
      // state.value.a = 1;
      // state.value.gf.b = 2;
      // state.value.gf.f.c = 3;
      // state.value.gf.f.s.d = 4;
      // console.log(state);
      // console.log(state.value);
      // console.log(state.value.gf);
      // console.log(state.value.gf.f);
      // console.log(state.value.gf.f.s);
    }
    return { state, myFn };
  }
};
</script>
